<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;width:0px;">0%</div>
  <button id="btn">run</button>
  <script>

    let dom = document.querySelector("#myDiv")
    function fn() {
      if (parseInt(dom.style.width) < 500) {
        dom.style.width = parseInt(dom.style.width) + 5 + 'px'
        dom.innerHTML = parseInt(dom.style.width) / 5 + '%'
        timer1 = requestAnimationFrame(fn)
      } else {
        // 结束动画
        cancelAnimationFrame(timer1)
      }

    }
    fn()
  </script>
</body>

</html>